{% extends '__base__.html' %}

{% block title %}网盘{% endblock %}
{% block content %}
  <div class="container">
    <div class="row">
        <div class="btn-toolbar col-md-8" role="toolbar" aria-label="Toolbar with button groups">
          <div class="btn-group mr-2" role="group" aria-label="First group">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#filezone">上传</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mkdir">新建文件夹</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#offline">离线下载</button>
            <button type="button" class="btn btn-primary export" data-path="/{{ path | join('/') }}">导出</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#import">导入</button>
            <button type="button" class="btn btn-primary update_poster" data-path="/{{ path | join('/') }}" >更新封面</button>
          </div>
          <input id="view-toogle" class="float-right" type="checkbox" {% if mode %} checked {% endif %} data-path="{{ path }}" data-toggle="toggle" data-on="列表视图" data-off="网格视图" data-onstyle="success" data-offstyle="danger">
        </div>
    </div>
    <div id="filezone" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content">
          <input id="fileElem" type="file" name="upload"  style="display:none">
          <label id="fileSelect" class="text-center">Select some files</label>
        </div>
      </div>
    </div>
    <div id="mkdir" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="input-group">
              <input type="text" class="form-control" placeholder="输入文件名" aria-label="Recipient's username" aria-describedby="basic-addon2">
              <button class="btn btn-success input-group-append" data-path="/{{ path | join('/') }}">确定</button>
            </div>
        </div>
      </div>
    </div>
    <div id="offline" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="form-group">
            <input type="checkbox" class="form-control" name="offline" data-toggle="toggle" data-on="离线下载" data-off="新建文件" data-onstyle="success" data-offstyle="danger" data-width="100%" checked>
            <input type="text" class="form-control" name="url" placeholder="输入URL">
            <input type="text" class="form-control" name="name" placeholder="输入名称">
            <input type="text" class="form-control" name="referer" placeholder="输入关联网页">
            <input type="text" class="form-control" name="poster_referer" placeholder="输入封面地址">
          </div>
          <button class="btn btn-success text-center" data-path="/{{ path | join('/') }}">确定</button>
        </div>
      </div>
    </div>
    <!-- fileopt | diropt -->
    <div id="showfile" class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content overflow-auto">
          <div class="modal-header"></div>
          <div class="modal-body d-flex justify-content-center"></div>
        </div>
      </div>
    </div>
    <div id="move" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="input-group">
              <input type="text" class="form-control" placeholder="输入目标文件夹" aria-label="Recipient's username" aria-describedby="basic-addon2">
              <button class="btn btn-success input-group-append" data-path="/{{ path | join('/') }}">确定</button>
            </div>
        </div>
      </div>
    </div>
    <div id="rename" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="input-group">
              <input type="text" class="form-control" placeholder="输入新的文件名" aria-label="Recipient's username" aria-describedby="basic-addon2">
              <button class="btn btn-success input-group-append" data-path="/{{ path | join('/') }}">确定</button>
            </div>
        </div>
      </div>
    </div>
    <div id="referer" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content">
        </div>
      </div>
    </div>
    <div id="status" class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content">
        </div>
      </div>
    </div>
    <div id="export" class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content">
          <textarea style="height: 50vh" readonly></textarea>
        </div>
      </div>
    </div>
    <div id="import" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="input-group">
              <textarea type="text" class="form-control" placeholder="输入导入数据"></textarea>
              <button class="btn btn-success input-group-append">确定</button>
            </div>
        </div>
      </div>
    </div>
    <div id="update" class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="form-group">
            <input type="text" class="form-control" name="path" readonly>
            <input type="text" class="form-control" name="status" placeholder="输入状态">
            <input type="text" class="form-control" name="referer" placeholder="输入m3u8下载地址">
            <input type="text" class="form-control" name="poster_referer" placeholder="输入封面下载地址">
            <input type="text" class="form-control" name="referer_referer" placeholder="输入关联网页">
            <input type="text" class="form-control" name="url" placeholder="输入播放URI">
            <!-- <input type="text" class="form-control" name="show" placeholder="是否展示"> -->
            <button class="btn btn-sm" data-toggle="collapse" data-target="#load_src" aria-expanded="false" aria-controls="load_src">展开播放源</button>
          </div>
          <div class="form-group collapse multi-collapse load_src" id="load_src">
            <button class="btn btn-primary">获取播放源</button>
            <input type="text" class="form-control" name="dom_path" placeholder="过滤器" value="[{'video': {'attr': {'id': 'video-play'}, 'string': ''}}]">
            <input type="text" class="form-control" name="get_res" placeholder="信息处理" value="{'attrs': ['data-src', 'data-poster']}">
            <textarea class="form-control" name="result">信息获取中...</textarea>
          </div>
          <button class="btn btn-success text-center" data-path="/{{ path | join('/') }}">确定</button>
        </div>
      </div>
    </div>
    <div class="row">
      <nav class="col-md-8" aria-label="breadcrumb">
        <ol class="breadcrumb">
          {% with %}
          {% for item in path %}
          {% if loop.last %}
          <li class="breadcrumb-item active" aria-current="page">{{ item }}</li>
          {% else %}
          <li class="breadcrumb-item"><a href="/hls?path=/{{ path | slice(loop.length - loop.index + 1) | first | join('/')}}&mode={% if mode%}true{%else%}false{% endif %}">{{ item }}</a></li>
          {% endif %}
          {% endfor %}
          {% endwith %}
        </ol>
      </nav>
    </div>
    {% if mode %}
    <div class="row">
      <div class="col-md pb-4 table-responsive">
        <table class="table table-hover table-striped">
          <thead>
              <tr>
                  <th scope="col" width="6%">类型</th>
                  <th scope="col" width="30%">文件名</th>
                  <th scope="col" width="6%">类型</th>
                  <th scope="col" width="16%">状态</th>
                  <th scope="col">创建时间</th>
                  <th scope="col">修改时间</th>
                  <th scope="col" width="6%">删除</th>
              </tr>
          </thead>
          <tbody>
            {% for item in files %}
            <tr class="fileitem"
              data-path="{{ item.path }}/{{ item.name }}" 
              data-name="{{ item.name }}" 
              data-url="{{ item.url }}" 
              data-status="{{ item.status }}" 
              data-type="{{ item.content_type }}"
              data-referer_referer="{{ item.referer_referer }}"
              data-poster_referer="{{ item.poster_referer }}"
              data-referer="{{ item.referer }}">
              {% if item.content_type == 'd' %}
              <th scope="row"><a href="/hls?path={{ item.path }}/{{ item.name }}"><i class="fa fa-folder-o"></i></a></th>
              <td class="enter tb-filename" type=button data-path="{{ item.path }}/{{ item.name }}" data-toggle="tooltip" data-placement="top" title="{{ item.name }}">
                {{ item.name }}
              </td>
              {% else %}
              <th scope="row"><i class="fa fa-file-o"></i></th>
              <td {% if item.status == '1'%} class="showfile tb-filename" {% else %} class="tb-filename" {% endif %} type=button data-path="{{ item.path }}/{{ item.name }}" data-name="{{ item.name }}" data-url="{{ item.url }}" data-toggle="tooltip" data-placement="top" title="{{ item.name }}">
                {{ item.name }}
              </td>
              {% endif %}
              <td>{{ item.content_type }}</td>
              <td>{{ item.status | status_filter }}</td>
              <td><span>{{ item.created_at }}</span></td>
              <td>{{ item.updated_at }}</td>
              <td><button class="btn btn-sm delete" data-path="{{ item.path }}/{{ item.name }}"><i class="fa fa-trash-o"></i></button></td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    {% else %}
    <div class="row video-grid">
      {% for item in files %}
      <div class="colVideoList fileitem" style="cursor: pointer;"
        data-toggle="tooltip" data-placement="top" title="{{ item.name }}">
        {% if item.content_type == 'd' %}
        <div class="video-elem enter"
        {% else %}
        {% if item.status == '1' %}
        <div class="video-elem showfile"
        {% elif item.status == '0' %}
        <div class="video-elem" style="box-shadow:2px 2px 8px rgb(47, 206, 47), -2px 2px 8px rgb(47, 206, 47);border-radius: 5px; border-right: 1px solid rgb(47, 206, 47);"
        {% else %}
        <div class="video-elem" style="box-shadow:2px 2px 8px rgb(245, 85, 85), -2px 2px 8px rgb(245, 85, 85);border-radius: 5px; border-right: 1px solid rgb(245, 85, 85);"
        {% endif %}
        {% endif %}
        data-path="{{ item.path }}/{{ item.name }}" 
        data-name="{{ item.name }}" 
        data-url="{{ item.url }}" 
        data-status="{{ item.status }}" 
        data-type="{{ item.content_type }}"
        data-referer_referer="{{ item.referer_referer }}"
        data-poster_referer="{{ item.poster_referer }}"
        data-referer="{{ item.referer }}">
          <div class="display d-block">
            <div class="scale"></div>
            {% if item.content_type == 'd' %}
            <div class="img" style="background-image: url('{{ static_url }}/app/folder.png');"></div>
            {% else %}
            <div class="img" {% if item.poster %} style="background: url('{{ poster_url }}/{{ item.poster }}'), url('{{ static_url }}/app/404.png');background-size: cover;" {% endif %}></div>
            <!-- <div class="img" {% if item.poster %} style="background-image: url('{{ poster_url }}/{{ item.poster }}')" {% endif %}></div> -->
            <small class="layer">
                {{ item.duration | duration_filter }}
            </small>
            {% endif %}
          </div>
          <a class="title text-sub-title mt-2 mb-3">{{ item.name }}</a>
        </div>
      </div>
      {% endfor %}
    </div>
    {% endif %}
  </div>
  <div id="popupRC" style="display:none;background-color: antiquewhite;" class="panel panel-primary">
    <!-- <div class="panel-heading ">Right Click Window</div> -->
    <div class="panel-body">
      <button class="dropdown-item showfile">预览</button>
      <button class="dropdown-item enter">进入</button>
      <button class="dropdown-item move" type="button">移动</button>
      <button class="dropdown-item rename" type="button">重命名</button>
      <button class="dropdown-item export" type="button">导出</button>
      <button class="dropdown-item referer">源地址</button>
      <button class="dropdown-item pause">暂停</button>
      <button class="dropdown-item reflash">刷新</button>
      <button class="dropdown-item status">状态</button>
      <button class="dropdown-item restart">开始</button>
      <button class="dropdown-item update">修改</button>
      <button class="dropdown-item update_poster">更新封面</button>
    </div>
    <!-- <div class="panel-footer"><input type="button" class="btn" value="close" onClick="$('#popupRC').css({ display: 'none' });"/></div> -->
  </div>
{% endblock %}

{% block beforebody %}
<script>
  $(document).ready(function () {
      $(".fileitem").bind('contextmenu', function (event) {
      event.preventDefault(); // prevents default menu 
      // let path = event.target.dataset['path'] ? event.target.dataset['path'] : (event.target.parentNode.dataset['path'] ? event.target.parentNode.dataset['path'] : event.target.parentNode.parentNode.dataset['path']) 
      // let url = event.target.dataset['url'] ? event.target.dataset['url'] : (event.target.parentNode.dataset['url'] ? event.target.parentNode.dataset['url'] : event.target.parentNode.parentNode.dataset['url']) 
      // let name = event.target.dataset['name'] ? event.target.dataset['name'] : (event.target.parentNode.dataset['name'] ? event.target.parentNode.dataset['name'] : event.target.parentNode.parentNode.dataset['name']) 
      // let type = event.target.dataset['type'] ? event.target.dataset['type'] : (event.target.parentNode.dataset['type'] ? event.target.parentNode.dataset['type'] : event.target.parentNode.parentNode.dataset['type']) 
      // let status = event.target.dataset['status'] ? event.target.dataset['status'] : (event.target.parentNode.dataset['status'] ? event.target.parentNode.dataset['status'] : event.target.parentNode.parentNode.dataset['status']) 
      // let referer = event.target.dataset['referer'] ? event.target.dataset['referer'] : (event.target.parentNode.dataset['referer'] ? event.target.parentNode.dataset['referer'] : event.target.parentNode.parentNode.dataset['referer']) 
      // let referer_referer = event.target.dataset['referer_referer'] ? event.target.dataset['referer_referer'] : (event.target.parentNode.dataset['referer_referer'] ? event.target.parentNode.dataset['referer_referer'] : event.target.parentNode.parentNode.dataset['referer_referer']) 
      // let poster_referer = event.target.dataset['poster_referer'] ? event.target.dataset['poster_referer'] : (event.target.parentNode.dataset['poster_referer'] ? event.target.parentNode.dataset['poster_referer'] : event.target.parentNode.parentNode.dataset['poster_referer']) 
      let path = get_parent_data(event.target, 'path')
      let url = get_parent_data(event.target, 'url')
      let name = get_parent_data(event.target, 'name')
      let type = get_parent_data(event.target, 'type')
      let status = get_parent_data(event.target, 'status')
      let referer = get_parent_data(event.target, 'referer')
      let referer_referer = get_parent_data(event.target, 'referer_referer')
      let poster_referer = get_parent_data(event.target, 'poster_referer')
      
      $("#popupRC .move")[0].dataset['path'] = path
      $("#popupRC .rename")[0].dataset['path'] = path
      $("#popupRC .export")[0].dataset['path'] = path
      if (type === 'd') {
        $("#popupRC .enter")[0].dataset['path'] = path
        $("#popupRC .enter").css({display: "block"})
        $("#popupRC .showfile").css({display: "none"})
        $("#popupRC .referer").css({display: "none"})
        $("#popupRC .reflash").css({display: "none"})
        $("#popupRC .pause").css({display: "none"})
        $("#popupRC .status").css({display: "none"})
        $("#popupRC .restart").css({display: "none"})
        $("#popupRC .update").css({display: "none"})
      } else {
        $("#popupRC .enter").css({display: "none"})
        // 暂停
        if (status == '-1') {
          $("#popupRC .restart")[0].dataset['path'] = path
          $("#popupRC .restart").css({display: "block"})
          $("#popupRC .showfile").css({display: "none"})
          $("#popupRC .referer").css({display: "none"})
          $("#popupRC .reflash").css({display: "none"})
          $("#popupRC .pause").css({display: "none"})
          $("#popupRC .status").css({display: "none"})
        }
        // 下载中
        if (status === '0') {
          $("#popupRC .pause")[0].dataset['path'] = path
          $("#popupRC .pause").css({display: "block"})
          $("#popupRC .status")[0].dataset['path'] = path
          $("#popupRC .status").css({display: "block"})
          $("#popupRC .reflash")[0].dataset['path'] = path
          $("#popupRC .reflash").css({display: "block"})
          $("#popupRC .showfile").css({display: "none"})
          $("#popupRC .referer").css({display: "none"})
          $("#popupRC .restart").css({display: "none"})
        }
        // 下载完成
        if (status === '1') {
          $("#popupRC .showfile")[0].dataset['url'] = url
          $("#popupRC .showfile")[0].dataset['name'] = name
          $("#popupRC .showfile").css({display: "block"})
          $("#popupRC .referer")[0].dataset['path'] = referer
          $("#popupRC .referer").css({display: "block"})
          $("#popupRC .pause").css({display: "none"})
          $("#popupRC .reflash").css({display: "none"})
          $("#popupRC .restart").css({display: "none"})
          $("#popupRC .status").css({display: "none"})
        }
        $("#popupRC .update")[0].dataset['status'] = status
        $("#popupRC .update")[0].dataset['path'] = path
        $("#popupRC .update")[0].dataset['referer'] = referer
        $("#popupRC .update")[0].dataset['referer_referer'] = referer_referer
        $("#popupRC .update")[0].dataset['poster_referer'] = poster_referer
        $("#popupRC .update")[0].dataset['url'] = url
        $("#popupRC .update").css({display: "block"})
        // update_poster
        $("#popupRC .update_poster")[0].dataset['path'] = path
        $("#popupRC .update_poster").css({display: "block"})
      }
      $("#popupRC").css({ position: "absolute", top: event.pageY, left: event.pageX, display: "block" });
    });
  });
  document.querySelectorAll('.video-elem').forEach(el => {
    el.addEventListener('click', function(event) {
      let url = event.target.dataset['url']
    })
  })
  // 新建文件夹
  document.querySelector('#mkdir button').addEventListener('click', event => {
      let el = event.target
      let parent = el.dataset["path"]
      let name = el.parentNode.querySelector('input').value
      axios.get('/hls/mkdir/' + name, {
          params: {
            parent: parent,
          }
      })
      .then(function (response) {
          // console.log(response);
          if (response.status === 200) {
            let data = response.data
            if (data['code'] === 0) {
              console.log('SUCCESS: ' + data['msg'])
              location.assign('/hls?path=' + data['msg'] + '&mode=' + document.querySelector('#view-toogle').checked)
            } else {
              console.log('FAILED: ' + data['msg'])
              alert(data['msg'])
            }
          }
      })
      .catch(function (error) {
        console.log(error);
      });
  })
  // 离线下载
  document.querySelector('#offline button').addEventListener('click', event => {
      let el = event.target
      let parent = el.dataset["path"]
      let url = el.parentNode.querySelector('input[name="url"]').value
      let name = el.parentNode.querySelector('input[name="name"]').value
      let referer = el.parentNode.querySelector('input[name="referer"]').value
      let poster_referer = el.parentNode.querySelector('input[name="poster_referer"]').value
      let offline = el.parentNode.querySelector('input[name="offline"]').checked
      let get_url = offline ? '/hls/offline' : '/hls/newone'
      axios.get(get_url, {
          params: {
            parent: parent,
            url: url,
            name: name,
            referer: referer,
            poster_referer: poster_referer,
          }
      })
      .then(function (response) {
          // console.log(response);
          if (response.status === 200) {
            let data = response.data
            if (data['code'] === 0) {
              console.log('SUCCESS: ' + data['msg'])
              location.assign('/hls?path=' + data['msg'] + '&mode=' + document.querySelector('#view-toogle').checked)
            } else {
              console.log('FAILED: ' + data['msg'])
              alert(data['msg'])
            }
          }
      })
      .catch(function (error) {
        console.log(error);
      });
  })
  // 导出
  document.querySelectorAll('.export').forEach(el=> {
    el.addEventListener('click', function(event) {
      let fullpath = event.target.dataset["path"]
      axios.get('/hls/export', {
          params: {
            fullpath: fullpath,
          }
      })
      .then(function (response) {
          // console.log(response);
          if (response.status === 200) {
            let data = response.data
            if (data['code'] === 0) {
                console.log('SUCCESS: ' + data['msg'])
            } else {
                console.log('FAILED: ' + data['msg'])
            }
            document.querySelector('#export .modal-content textarea').innerHTML = data['msg']
            // onpropertychange= "this.style.posHeight=this.scrollHeigh
            $('#export').modal('show')
            console.log(document.querySelector('#export .modal-content textarea').scrollHeight)
            console.log(document.querySelector('#export .modal-content textarea').style.posHeight)
          }
      })
      .catch(function (error) {
        console.log(error);
      });
    })
  })
  // 导入
  document.querySelector('#import button').addEventListener('click', function(event) {
    let data = event.target.parentNode.querySelector('textarea').value
    axios.post('/hls/import_data', {
      data: data,
    })
    .then(function (response) {
        // console.log(response);
        if (response.status === 200) {
          let data = response.data
          if (data['code'] === 0) {
              console.log('SUCCESS: ' + data['msg'])
              location.assign('/hls?mode=' + document.querySelector('#view-toogle').checked)
          } else {
              console.log('FAILED: ' + data['msg'])
              alert(data['msg'])
          }
        }
    })
    .catch(function (error) {
      console.log(error);
    });
  })
  // 删除
  document.querySelectorAll('.delete').forEach(el=>{
      el.addEventListener('click', event=>{
          // let path = event.target.dataset['path'] ? event.target.dataset['path'] : event.target.parentNode.dataset['path']
          let path = get_parent_data(event.target, 'path')
          if(confirm('删除路径[' + path + ']')){
            console.log('删除路径[' + path + ']');
            axios.get('/hls/delete', {
              params: {
                path: path
              }
            })
            .then(function (response) {
                // console.log(response);
                if (response.status === 200) {
                  let data = response.data
                  if (data['code'] === 0) {
                    console.log('SUCCESS: ' + data['msg'])
                    location.assign('/hls?path=' + data['msg'] + '&mode=' + document.querySelector('#view-toogle').checked)
                  } else {
                    console.log('FAILED: ' + data['msg'])
                    alert(data['msg'])
                  }
                }
            })
            .catch(function (error) {
              console.log(error);
            });
          }
      })
  })
  // 点击文件名,弹出文件操作选项,并位操作选项添加属性
  // 文件操作列表,清理属性
  $('#showfile').on('hidden.bs.modal', function(event) {
    $('#showfile')[0].querySelector('.modal-content .modal-body').innerHTML = ''
  })
  // 关闭文件操作
  document.querySelector('main').addEventListener('click', ()=>{
    $('#popupRC').css({ display: 'none' });
  }, false)
  // 暂停
  document.querySelectorAll('.pause').forEach(el => {
    el.addEventListener('click', function(event) {
      let fullpath = event.target.dataset['path']
      axios.get('/hls/pause', {
          params: {
            fullpath: fullpath
          }
      })
      .then(function (response) {
          // console.log(response);
          if (response.status === 200) {
              let data = response.data
              if (data['code'] === 0) {
                console.log('SUCCESS: ' + data['msg'])
                location.assign('/hls?path=' + data['msg'] + '&mode=' + document.querySelector('#view-toogle').checked)
              } else {
                console.log('FAILED: ' + data['msg'])
                alert(data['msg'])
              }
          }
      })
      .catch(function (error) {
        console.log(error);
      });
    })
  })
  // 状态
  document.querySelectorAll('.status').forEach(el => {
    el.addEventListener('click', function(event) {
      let fullpath = event.target.dataset['path']
      axios.get('/hls/status', {
          params: {
            fullpath: fullpath
          }
      })
      .then(function (response) {
          // console.log(response);
          if (response.status === 200) {
            let data = response.data
            if (data['code'] === 0) {
                console.log('SUCCESS: ' + data['msg'])
            } else {
                console.log('FAILED: ' + data['msg'])
            }
            document.querySelector('#status .modal-content').innerHTML = data['msg']
            $('#status').modal('show')
          }
      })
      .catch(function (error) {
        console.log(error);
      });
    })
  })
  // 刷新
  document.querySelectorAll('.reflash').forEach(el => {
    el.addEventListener('click', function(event) {
      let fullpath = event.target.dataset['path']
      location.assign('/hls?path=' + fullpath.substr(0, fullpath.lastIndexOf('/')) + '&mode=' + document.querySelector('#view-toogle').checked)
    })
  })
  // 开始
  document.querySelectorAll('.restart').forEach(el => {
    el.addEventListener('click', function(event) {
      let fullpath = event.target.dataset['path']
      axios.get('/hls/restart', {
          params: {
            fullpath: fullpath
          }
      })
      .then(function (response) {
          // console.log(response);
          if (response.status === 200) {
              let data = response.data
              if (data['code'] === 0) {
                console.log('SUCCESS: ' + data['msg'])
                location.assign('/hls?path=' + data['msg'] + '&mode=' + document.querySelector('#view-toogle').checked)
              } else {
                console.log('FAILED: ' + data['msg'])
                alert(data['msg'])
              }
          }
      })
      .catch(function (error) {
        console.log(error);
      });
    })
  })
  // 预览文件
  document.querySelectorAll('.showfile').forEach(el => {
    el.addEventListener('click', function(event) {
      let src = '{{ hlsurl }}/' + el.dataset['url']
      let video = document.createElement('video')
      video.controls="controls"
      video.style = 'object-fit: contain;max-height: 70vh;max-width: 95vw'
      let hls = new Hls();
      hls.loadSource(src);
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED,function() {
        video.play();
      });
      /*
      let player = new Clappr.Player({
        source: src,
        // poster: 'http://i.q2img.com/thumb/49/49-C3sBrLODOrG8EIXzzMjD_t_5.jpg',
        mute: true,
        height: 360,
        width: 640,
      });
      player.attachTo(video);
      */
      document.querySelector('#showfile .modal-content .modal-body').innerHTML = ''
      document.querySelector('#showfile .modal-header').innerHTML = el.dataset['name']
      document.querySelector('#showfile .modal-content .modal-body').append(video)
      $('#showfile').modal('show')
    })
  })
  // 移动
  document.querySelectorAll('.move').forEach(el => {
    el.addEventListener('click', function(event) {
      let fullpath = event.target.dataset['path']
      $('#move')[0].querySelector('button').dataset['path'] = fullpath
      $('#move').modal('show')
    })
  })
  // 重命名
  document.querySelectorAll('.rename').forEach(el => {
    el.addEventListener('click', function(event) {
      let fullpath = event.target.dataset['path']
      $('#rename')[0].querySelector('button').dataset['path'] = fullpath
      $('#rename')[0].querySelector('input').value = fullpath.split('/').pop()
      $('#rename').modal('show')
    })
  })
  // 更新封面
  document.querySelectorAll('.update_poster').forEach(el => {
    el.addEventListener('click', function(event) {
      let fullpath = event.target.dataset['path']
      axios.get('/hls/update_poster', {
          params: {
            fullpath: fullpath
          }
      })
      .then(function (response) {
          // console.log(response);
          if (response.status === 200) {
              let data = response.data
              if (data['code'] === 0) {
                console.log('SUCCESS: ' + data['msg'])
                location.assign('/hls?path=' + data['msg'] + '&mode=' + document.querySelector('#view-toogle').checked)
              } else {
                console.log('FAILED: ' + data['msg'])
                alert(data['msg'])
              }
          }
      })
      .catch(function (error) {
        console.log(error);
      });
    })
  })
  /**********************************
  // 文件夹操作
  **********************************/
  // 进入
  document.querySelectorAll('.enter').forEach(el => {
    el.addEventListener('click', function(event) {
      // let fullpath = event.target.dataset['path'] ? event.target.dataset['path'] : (event.target.parentNode.dataset['path'] ? event.target.parentNode.dataset['path'] : event.target.parentNode.parentNode.dataset['path'])
      let fullpath = get_parent_data(event.target, 'path')
      location.assign('/hls?path=' + fullpath + '&mode=' + document.querySelector('#view-toogle').checked)
    })
  })
  // 移动
  document.querySelectorAll('#optdir .move').forEach(el => {
    el.addEventListener('click', function(event) {
      let fullpath = event.target.dataset['path']
      $('#move')[0].querySelector('button.move').dataset['path'] = fullpath
      $('#move').modal('show')
    })
  })
  // 重命名
  document.querySelectorAll('#optdir .rename').forEach(el => {
    el.addEventListener('click', function(event) {
      let fullpath = event.target.dataset['path']
      $('#rename')[0].querySelector('button.rename').dataset['path'] = fullpath
      $('#rename').modal('show')
    })
  })
  /*********************************************/
  // 移动
  document.querySelector('#move button').addEventListener('click', event => {
      let el = event.target
      let fullpath = el.dataset["path"]
      let newpath = el.parentNode.querySelector('input').value
      axios.get('/hls/move', {
          params: {
            fullpath: fullpath,
            newpath: newpath,
          }
      })
      .then(function (response) {
          // console.log(response);
          if (response.status === 200) {
            let data = response.data
            if (data['code'] === 0) {
              console.log('SUCCESS: ' + data['msg'])
              location.assign('/hls?path=' + data['msg'] + '&mode=' + document.querySelector('#view-toogle').checked)
            } else {
              console.log('FAILED: ' + data['msg'])
              alert(data['msg'])
            }
          }
      })
      .catch(function (error) {
        console.log(error);
      });
  })
  // 重命名
  document.querySelector('#rename button').addEventListener('click', event => {
      let el = event.target
      let fullpath = el.dataset["path"]
      let newname = el.parentNode.querySelector('input').value
      axios.get('/hls/rename', {
          params: {
            fullpath: fullpath,
            newname: newname,
          }
      })
      .then(function (response) {
          // console.log(response);
          if (response.status === 200) {
            let data = response.data
            if (data['code'] === 0) {
                console.log('SUCCESS: ' + data['msg'])
                location.assign('/hls?path=' + data['msg'] + '&mode=' + document.querySelector('#view-toogle').checked)
            } else {
                console.log('FAILED: ' + data['msg'])
                alert(data['msg'])
            }
          }
      })
      .catch(function (error) {
        console.log(error);
      });
  })
  // 源地址
  document.querySelectorAll('.referer').forEach(el => {
    el.addEventListener('click', function(event) {
      let referer = event.target.dataset['path']
      document.querySelector('#referer .modal-content').innerHTML = referer
      $('#referer').modal('show')
    })
  })
  // 修改,右键菜单[修改]按钮
  document.querySelectorAll('.update').forEach(el => {
    el.addEventListener('click', function(event) {
      document.querySelector('#update .modal-content input[name="path"]').value = el.dataset['path']
      document.querySelector('#update .modal-content input[name="status"]').value = el.dataset['status']
      document.querySelector('#update .modal-content input[name="referer"]').value = el.dataset['referer']
      document.querySelector('#update .modal-content input[name="referer_referer"]').value = el.dataset['referer_referer']
      document.querySelector('#update .modal-content input[name="poster_referer"]').value = el.dataset['poster_referer']
      document.querySelector('#update .modal-content input[name="url"]').value = el.dataset['url']
      $('#update').modal('show')
    })
  })
  // 修改modal收起时,去掉属性
  $('#update').on('hidden.bs.modal', function(event) {
    document.querySelectorAll('#update .modal-content input[name]').forEach(el => {
      el.value = ''
    })
  })
  // 修改[确定]按钮
  document.querySelector('#update .modal-content button.btn-success').addEventListener('click', function(event) {
    let path = document.querySelector('#update .modal-content input[name="path"]').value
    let status = document.querySelector('#update .modal-content input[name="status"]').value
    let referer = document.querySelector('#update .modal-content input[name="referer"]').value
    let referer_referer = document.querySelector('#update .modal-content input[name="referer_referer"]').value
    let poster_referer = document.querySelector('#update .modal-content input[name="poster_referer"]').value
    let url = document.querySelector('#update .modal-content input[name="url"]').value
    axios.get('/hls/update', {
        params: {
          path: path,
          status: status,
          referer: referer,
          referer_referer: referer_referer,
          poster_referer: poster_referer,
          url: url,
        }
    })
    .then(function (response) {
        // console.log(response);
        if (response.status === 200) {
          let data = response.data
          if (data['code'] === 0) {
              console.log('SUCCESS: ' + data['msg'])
              location.assign('/hls?path=' + data['msg'] + '&mode=' + document.querySelector('#view-toogle').checked)
          } else {
              console.log('FAILED: ' + data['msg'])
              alert(data['msg'])
          }
        }
    })
    .catch(function (error) {
      console.log(error);
    });
  })
  // 解析网页
  function load_src(event) {
      let url = document.querySelector('#update .modal-content input[name="referer_referer"]').value
      let dom_path = document.querySelector('#update .modal-content input[name="dom_path"]').value
      let get_res = document.querySelector('#update .modal-content input[name="get_res"]').value
      let mode = 0
      if (event.target.classList.contains('btn-primary')) {
        mode = 1
      } else {
        document.querySelector('#update .modal-content input[name="dom_path"]').value = "[{'video': {'attr': {'id': 'video-play'}, 'string': ''}}]"
        document.querySelector('#update .modal-content input[name="get_res"]').value = "{'attrs': ['data-src', 'data-poster']}"
      }
      document.querySelector('#update .modal-content textarea[name="result"]').innerText = '信息获取中...'
      if (url === 'None' || url.length === 0) {
        alert('[ERROR]关联网址未指定')
        return
      }
      axios.get('/hls/load_src', {
        params: {
          url: url,
          dom_path: dom_path,
          get_res: get_res,
          mode: mode
        }
    })
    .then(function (response) {
        // console.log(response);
        if (response.status === 200) {
          let data = response.data
          if (data['code'] === 0) {
              console.log('SUCCESS: ' + data['msg'])
              document.querySelector('#update .modal-content textarea[name="result"]').innerText = data['msg']
          } else {
              console.log('FAILED: ' + data['msg'])
              alert(data['msg'])
          }
        }
    })
    .catch(function (error) {
      console.log(error);
    });
  }
  // mode-1,点击[获取播放源]按钮
  document.querySelector('#load_src button').addEventListener('click', load_src)
  // mode-0,展开播放源
  $('#load_src').on('show.bs.collapse', load_src)
  $('#view-toogle').change(function(event){
    console.log(event.target.checked)
    location.assign('/hls?path=/{{ path | join('/')}}&mode=' + document.querySelector('#view-toogle').checked)
  })
  // 获取父级元素data
  function get_parent_data(el, key) {
    let tmp = el
    while (!el.dataset[key]) {
      if (el.tagName === 'HTML') break
      el = el.parentNode
    }
    // if (!el.dataset[key]) {
    //   console.error('元素[' + el + ']及其父级元素未设置data-' + key)
    // }
    return el.dataset[key]
  }
</script>
{% endblock %}